<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/html">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href = "../css/bootstrap.min.css">
    <script type="application/javascript" src="../js/jquery-1.9.0.min.js"></script>
    <script type="application/javascript" src="../js/bootstrap.min.js"></script>
    <title>导航条样式</title>
</head>
<body>
    <div class="container">
        <h1>基础导航</h1>
        <nav class="navbar navbar-default">
            <div class="navbar-header">
                <a href="#" class="navbar-brand">导航</a>
            </div>
            <ul class="nav navbar-nav">
                <li class="active"><a href="#">首页</a></li>
                <li><a href="#">选项A</a></li>
                <li class="disabled"><a href="#">选项B</a></li>
                <li><a href="#">选项C</a></li>
            </ul>
        </nav>

        <h1>导航 中加表单</h1>
        <nav class="navbar navbar-default">
            <div class="navbar-header">
                <a href="#" class="navbar-brand">导航</a>
            </div>
            <ul class="nav navbar-nav">
                <li class="active"><a href="#">首页</a></li>
                <li><a href="#">选项A</a></li>
                <li class="disabled"><a href="#">选项B</a></li>
                <li><a href="#">选项C</a></li>
            </ul>

            <form method="post" class="navbar-form navbar-right" style="margin-right: 20px;">
                <div class="form-group">
                    <input type="text" class="form-control">
                </div>
                <button type="button" class="btn btn-danger">搜索</button>
            </form>
        </nav>
        <h1>导航 中加文本，连接，按钮</h1>
        <nav class="navbar navbar-default">
            <div class="navbar-header">
                <a href="#" class="navbar-brand">导航</a>
            </div>
            <ul class="nav navbar-nav">
                <li class="active"><a href="#">首页</a></li>
                <li><a href="#">选项A</a></li>
                <li class="disabled"><a href="#">选项B</a></li>
                <li><a href="#">选项C</a></li>
            </ul>

            <p class="navbar-text">文本</p>
            <a href="#" class="navbar-link">连接</a>
            <button type="button" class="btn btn-default navbar-btn">按钮</button>
        </nav>

        <h1>顶部固定</h1>
        <nav class="navbar navbar-default navbar-fixed-top">
            <div class="navbar-header">
                <a href="#" class="navbar-brand">导航</a>
            </div>
            <ul class="nav navbar-nav">
                <li class="active"><a href="#">首页</a></li>
                <li><a href="#">选项A</a></li>
                <li class="disabled"><a href="#">选项B</a></li>
                <li><a href="#">选项C</a></li>
            </ul>
        </nav>

        <h1>合屏黑方角导航</h1>
        <nav class="navbar navbar-inverse navbar-static-top">
            <div class="navbar-header">
                <a href="#" class="navbar-brand">导航</a>
            </div>
            <ul class="nav navbar-nav">
                <li class="active"><a href="#">首页</a></li>
                <li><a href="#">选项A</a></li>
                <li class="disabled"><a href="#">选项B</a></li>
                <li><a href="#">选项C</a></li>
            </ul>
        </nav>

    </div>


<!--  面包屑导航  -->
    <ol class="breadcrumb">
        <li><a href="#">Home</a></li>
        <li><a href="#">Library</a></li>
        <li class="active">Data</li>
    </ol>

<!--  分页组件  -->
    <nav aria-label="Page navigation">
        <ul class="pagination">
            <li>
                <a href="#" aria-label="Previous">
                    <span aria-hidden="true">&laquo</span>
                </a>
            </li>
            <li><a href="#">1</a></li>
            <li><a href="#">2</a></li>
            <li><a href="#">3</a></li>
            <li><a href="#">4</a></li>
            <li><a href="#">5</a></li>
            <li>
                <a href="#" aria-label="Next">
                    <span aria-hidden="true">&raquo;</span>
                </a>
            </li>
        </ul>
    </nav>
    <nav aria-label="Page navigation">
        <ul class="pagination pagination-lg">
            <li>
                <a href="#" aria-label="Previous">
                    <span aria-hidden="true">&laquo</span>
                </a>
            </li>
            <li><a href="#">1</a></li>
            <li><a href="#">2</a></li>
            <li><a href="#">3</a></li>
            <li><a href="#">4</a></li>
            <li><a href="#">5</a></li>
            <li>
                <a href="#" aria-label="Next">
                    <span aria-hidden="true">&raquo;</span>
                </a>
            </li>
        </ul>
    </nav>

<!--翻页-->
<nav>
    <ul class="pager">
        <li><a href="#">Previous</a></li>
        <li><a href="#">Next</a></li>
    </ul>
</nav>
    <nav>
    <ul class="pager">
        <li class="previous disabled"><a href="#"><span aria-hidden="true">&larr;</span>Previous</a></li>
        <li class="next"><a class="next" href="#">Next<span aria-hidden="true">&rarr;</span></a></li>
    </ul>
</nav>
</body>
</html>